<template>
  <div>
    <div class="provider-list">
      <div class="content">
        <div class="container">
          <div class="head">
            <div>
              <span style="font-size: 16px" class="title">用户信息</span>
            </div>
            <el-button @click="$router.go(-1)">返回</el-button>
          </div>
          <div class="flex line1">
            <img
              v-if="detail.touxiang && detail.touxiang.length"
              :src="detail.touxiang[0].filePath"
              alt=""
            />
            <div style="margin-left: 50px">
              <div class="right">
                <p><span class="title">昵称：</span>{{ detail.nicheng }}</p>
                <p>
                  <span class="title">手机号：{{ detail.shoujihao }}</span>
                </p>
                <p>
                  <span class="title">性别：</span
                  >{{ detail.xingbie?.code == 1 ? "男" : "女" }}
                </p>
                <p><span class="title">年龄：</span>{{ detail.nianling }}</p>
              </div>
              <div style="margin-top: 30px" class="flex right">
                <p>
                  <span class="title">是否为会员：</span
                  >{{ detail.huiyuan?.code == 1 ? "是" : "否" }}
                </p>
                <p>
                  <span class="title">会员类型：</span
                  >{{
                    detail.huiyuanleixing == "gerenhuiyuan"
                      ? "个人会员"
                      : detail.huiyuanleixing == "qiyehuiyuan"
                      ? "企业会员"
                      : "非会员"
                  }}
                  <span
                    @click="toMember"
                    style="color: skyblue; margin-left: 10px; cursor: pointer"
                    >查看</span
                  >
                </p>
                <p>
                  <span class="title">连续成为会员天数：</span
                  >{{ detail.huiyuanshichang }}天
                </p>
                <p>
                  <span class="title">会员截止时间：</span
                  >{{ detail.huiyuanjiezhiriqi }}天
                </p>
              </div>
              <div class="flex">
                <p>
                  <span class="title">企业信息：</span
                  ><span style="color: #ffa942">{{
                    detail.qiyerenzheng?.code == 0 ? "未认证" : "已认证"
                  }}</span>
                  <span
                    @click="toCompany"
                    style="color: skyblue; margin-left: 10px; cursor: pointer"
                    >查看</span
                  >
                </p>
              </div>
              <div class="flex">
                <p>
                  <span class="title">专家信息：</span
                  ><span style="color: #ffa942">{{
                    detail.zhuanjiarenzheng?.code == 0 ? "未认证" : "已认证"
                  }}</span>
                  <span
                    @click="toExpert"
                    style="color: skyblue; margin-left: 10px; cursor: pointer"
                    >查看</span
                  >
                </p>
              </div>
              <div class="flex">
                <p>
                  <span class="title">最近登录时间：</span
                  ><span style="color: #ffa942">{{
                    detail.zuijindenglushijian
                  }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="providerTable">
          <el-tabs v-model="activeName" class="provider-tabs">
            <el-tab-pane class="video-list" label="视频信息" name="1">
              <VideoInfo v-if="detail.yhNo" :yhNo="detail.yhNo" />
            </el-tab-pane>
            <el-tab-pane class="achievement" label="项目信息" name="2">
              <ProjectInfo v-if="detail.yhNo" :yhNo="detail.yhNo" />
            </el-tab-pane>
            <el-tab-pane class="achievement" label="项目发布信息" name="3">
              <ProjectDeploy v-if="detail.yhNo" :yhNo="detail.yhNo" />
            </el-tab-pane>
            <el-tab-pane class="achievement" label="联合体" name="4">
              <Consortium v-if="detail.yhNo" :yhNo="detail.yhNo" />
            </el-tab-pane>
            <el-tab-pane class="achievement" label="评论信息" name="5">
              <Comment v-if="detail.yhNo" :yhNo="detail.yhNo" />
            </el-tab-pane>
            <el-tab-pane class="achievement" label="收藏" name="6">
              <Save v-if="detail.yhNo" :yhNo="detail.yhNo" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { GetUserDetail } from "@/api/user";
import { useRoute, useRouter } from "vue-router";
import VideoInfo from "./components/videoInfo.vue";
import ProjectInfo from "./components/projectInfo.vue";
import ProjectDeploy from "./components/projectDeploy.vue";
import Consortium from "./components/consortium.vue";
import Comment from "./components/comment.vue";
import Save from "./components/save.vue";

const route = useRoute();
const router = useRouter();
const detail = ref({});
const activeName = ref("1");
const toExpert = () => {
  router.push({
    path: "/zhuanjia/detail",
    query: {
      id: detail.value.zjId,
    },
  });
};
const toCompany = () => {
  router.push({
    path: "/gongyingshang/detail",
    query: {
      id: detail.value.gysId,
    },
  });
};
const toMember = () => {
  router.push({
    path: "/huiyuanquanyi",
  });
};
const GetList = () => {
  GetUserDetail({ id: route.query.id }).then((res) => {
    if (res.code == 4201) {
      detail.value = res.data;
    }
  });
};
GetList();
</script>
<style lang="scss" scoped>
.right {
  width: 700px;
  display: flex;
  justify-content: space-between;
  & > p {
    width: 25%;
  }
}
.content {
  border: none !important;
  .container {
    padding: 50px;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
    }
  }
}
.title {
  font-weight: bold;
  color: #000;
  font-size: 12px;
}
.flex {
  display: flex;
  margin-bottom: 30px;
  &.line1 {
    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
  }
}
p {
  font-size: 12px;
  color: #333333;
}
.bottom {
  background-color: #ccc;
  height: 1px;
}
.providerTable {
  padding: 0px 50px 50px 50px;
}
.achievement {
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.certifyInfo {
  .contain {
    & > div {
      margin-top: 40px;
      display: flex;
      p {
        margin-left: 2px;
      }
      &.top-bottom {
      }
      &.left-right {
        align-items: center;
        &.normal {
          align-items: baseline;
        }
      }
    }
  }
}
.operation {
  width: 500px;
  margin-top: 100px;
}
</style>
<style lang="scss">
.el-tabs__nav-wrap {
  &::after {
    display: none;
  }
}
.providerTable .el-table__header th {
  background-color: #f2f9fc !important;
}
</style>
